<template>
  <div class="wifiBox">
    <van-nav-bar safe-area-inset-top placeholder :title="$t('WifiConnection')" left-arrow fixed @click-left="onClickLeft">
      <template #right>
        <van-icon name="question-o" size="24" @click="openDiscription" />
      </template>
    </van-nav-bar>

    <van-form name="wifi" @submit="wificonn">
      <div class="registered_box">
        <div class="registered_li">
          <div class="registered_li_tit required">{{$t('WIFINetwork')}}</div>
          <div class="fieldBox">
            <van-field clearable name="ssid" v-model="ssid" type="text" />
          </div>
        </div>
        <div class="registered_li">
          <div class="registered_li_tit required">{{$t('Password')}}</div>
          <div class="fieldBox">
            <van-field clearable name="password" v-model="password" type="text" />
          </div>
        </div>
      </div>

      <div class="btnBox">
        <van-button color="linear-gradient(#F9C25F, #F5861A)" :disabled="ssid==''||password==''" round block native-type="submit">{{$t('Setting')}}</van-button>
      </div>
    </van-form>
    <wifisetting ref="discriptShow"></wifisetting>
  </div>
</template>

<script>
import { Toast } from 'vant';
import wifisetting from '../components/Protocol/WifiSetting'
export default {
  components:{
    wifisetting
  },
  data(){
    return {
      ssid:'',
      password:''
    }
  },
  methods: {
    onClickLeft(){
      this.$router.push({path:'/wifi'});
    },
    openDiscription(){
      this.$refs.discriptShow.openPop(true,'1');
    },
    async wificonn(){
      this.comm.loadingShow();
      let data = await this.SETAPI.LocalIn({'optType':'ssidAndPwd',data:JSON.stringify({'ssid':this.ssid,'password':this.password})});
      let newdata=data.substring(0,1);
      if(newdata=="Y"){
        Toast.success(this.$t('SettingComplete'));
      }else{
        Toast.fail(this.$t('SettingFaild'));
      }
    }
  }
}
</script>

<style lang="less">
.wifiBox{
  .registered_box{
    width: 100%;
    background: #ffffff;
  }
  .registered_li{
    width: 100%;
    border-bottom: 1px solid #efefef;
  }
  .registered_li_tit{
    padding: 12px 0 0 15px;
    width: 100%;
    color: #929292;
    text-align: left;
    box-sizing: border-box;
  }
  .fieldBox{
    width: 100%;
  }
}
</style>
